{"componentChunkName":"component---src-templates-studio-page-js","path":"/studio/cyberpunk","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"👓 Cyberpunk UI","noFooter":false,"description":"赛博朋克的 UI 样式，前端实现的一些界面元素","date":"2021-06-03","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='458'%3e%3cpath%20d='M0%20229v229h401V0H0v229m175-30v6c0%203%201%204%204%204%204%200%207-2%207-7v-4h-5l-6%201m25%200l-1%205v5h4c5%200%207-2%207-7v-4h-5l-5%201m12%200l-1%205v5h4c5%200%207-3%207-7%200-3-1-4-5-4l-5%201M72%20264c-7%205-6%2014%202%2021%207%205%208%205%2012%200%206-8%206-16%201-20-4-4-11-4-15-1m116%2012v10h15c19%200%2019%200%2019-12v-8h-34v10m35%200v10h16c19%200%2019%200%2019-11l-1-7-18-1-16-1v10M57%20291c-2%201-3%204%200%203%202%200%206%203%206%205s-4%204-7%203-4%202-4%2010l-1%209c-3%204-3%205%201%205h1c-4%201-5%204-5%2017%200%2010%201%2012%202%2011l5%202c2%202%202%203%201%203l-3-1c-2-2-5-2-6%201s1%2010%202%208h3l-2%201c-1%200-1%201%202%203%205%204%206%208%205%2013l1%206%205%202c4%202%205%203%207%200%202-1%202-2%201-6-1-3-1-10%201-23%200-4%201-5%202-5l3-1c1%200%202%201%202%204l2%209c2%202%204%207%204%2010%203%209%208%2013%2012%209%201-1%201-1%201%201%200%203-5%206-9%204l-2-2-1-1c-2%200-1%209%201%2016l2%2014%201%207v7l4%201%204%201%204%202c5%201%209-1%207-4l-12-6-1-1c2%200%202-1%200-7-1-5-1-5%201-17%203-12%203-15-1-23v-10c3%200%206-5%207-10%200-4%200-5-1-4h-4c-2-2-1-3%201-2%202%202%204-1%203-4l-1-10c-1-12-2-12-5-12h-1c2-2%203-4%201-6l-1-7c0-5-1-8-2-9-2-2-3-6-1-8%204-4-29-12-35-8m7%2021l-1%201c-1%200-3%205-3%2010l-1%205-1%203c0%203%200%204%202%203l5%203c6%205%2011%208%2015%208%203%200%207-4%207-7%200-2%200-2%201-1l2%204%202%203c1%201%203%203%203%205%202%203%202%203%202%201l-4-10-4-9v-2l-1-4c0-6-1-7-3-5-4%202-5%201-10-4s-9-7-11-4m-9%2083l-1%2017c0%2012%200%2014-2%2019-3%207-3%208%201%208h3l-3%201c-2%201-3%202-3%205%201%206%202%208%208%208%205-1%206-3%203-8-3-6-1-21%205-36%203-8%203-11%201-11l-5-3c-4-5-5-5-7%200m240%202l-1%204v4h7c8%200%2011-2%2011-6%200-2-1-3-9-3l-8%201m-92%2052v5h6c8%200%2010-2%2010-7v-3h-16v5'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":0.8738019169329073,"src":"/static/1780dbc95965ca1fd887668a49d17458/fbb15/cyberpunk.png","srcSet":"/static/1780dbc95965ca1fd887668a49d17458/82675/cyberpunk.png 500w,\n/static/1780dbc95965ca1fd887668a49d17458/fef60/cyberpunk.png 1000w,\n/static/1780dbc95965ca1fd887668a49d17458/fbb15/cyberpunk.png 1094w","srcWebp":"/static/1780dbc95965ca1fd887668a49d17458/f71dc/cyberpunk.webp","srcSetWebp":"/static/1780dbc95965ca1fd887668a49d17458/7fe04/cyberpunk.webp 500w,\n/static/1780dbc95965ca1fd887668a49d17458/d619e/cyberpunk.webp 1000w,\n/static/1780dbc95965ca1fd887668a49d17458/f71dc/cyberpunk.webp 1094w","sizes":"(max-width: 1094px) 100vw, 1094px"}}},"noGlobalStyles":false,"bannerCredit":null,"slug":"/studio/cyberpunk","tags":["talking"]},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"cyberpunk\",\n  \"title\": \"👓 Cyberpunk UI\",\n  \"tech\": \"other\",\n  \"date\": \"2021-06-03 16:34:10\",\n  \"description\": \"赛博朋克的 UI 样式，前端实现的一些界面元素\",\n  \"titleColor\": \"#fff\",\n  \"btnStyle\": \"lightYellow\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/cyberpunk.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/cyberpunk\"\n  }, \"Cyberpunk UI\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"753ce666-76ed-5d43-9816-416999931e37","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/common/fishes.md","id":"37c77187-30e7-5f5a-a575-73533655f8ed","parent":{"name":"fishes","sourceInstanceName":"studio"},"excerpt":"预览可以到  鱼塘","fields":{"title":"🐠 小鱼塘","slug":"/studio/fishes","description":"一个小鱼儿自由晃荡的海底小世界，喜欢的话可以逗逗它们。你也可以扔个瓶子，捞个瓶子玩。","date":"2021-06-20","redirects":null,"datetime":"2021-06-20 16:34:10","categories":[],"series":null,"tags":["talking"],"status":"online"},"frontmatter":{"published":null,"tags":["talking"],"theme":null,"slug":"fishes","date":"2021-06-20 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"fishes\",\n  \"title\": \"🐠 小鱼塘\",\n  \"tech\": \"other\",\n  \"date\": \"2021-06-20 16:34:10\",\n  \"description\": \"一个小鱼儿自由晃荡的海底小世界，喜欢的话可以逗逗它们。你也可以扔个瓶子，捞个瓶子玩。\",\n  \"titleColor\": \"#063362\",\n  \"btnStyle\": \"lightYellow\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/fishes.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/fishtank/#0\"\n  }, \"\\u9C7C\\u5858\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/studio/common/qixi.md","id":"b42645e6-9ab0-5799-aa9a-4aa30b7eeb79","parent":{"name":"qixi","sourceInstanceName":"studio"},"excerpt":"预览可以到  七夕有你","fields":{"title":"👓 七夕有你","slug":"/studio/qixi","description":"七夕节日，最近沉迷 3D 搭建，所以花了几天空闲时间赶出来了这个小3D交互，有情人终成眷属，七夕快乐！","date":"2021-04-03","redirects":null,"datetime":"2021-04-03 16:34:10","categories":[],"series":null,"tags":["talking"],"status":"online"},"frontmatter":{"published":null,"tags":["talking"],"theme":null,"slug":"qixi","date":"2021-04-03 16:34:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"qixi\",\n  \"title\": \"👓 七夕有你\",\n  \"tech\": \"other\",\n  \"date\": \"2021-04-03 16:34:10\",\n  \"description\": \"七夕节日，最近沉迷 3D 搭建，所以花了几天空闲时间赶出来了这个小3D交互，有情人终成眷属，七夕快乐！\",\n  \"titleColor\": \"#85216c\",\n  \"btnStyle\": \"lightYellow\",\n  \"tags\": [\"talking\"],\n  \"banner\": \"../studios/qixi.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u9884\\u89C8\\u53EF\\u4EE5\\u5230 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/qixi\"\n  }, \"\\u4E03\\u5915\\u6709\\u4F60\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}